<template>
  <el-form-item label="月份选择">
    <el-date-picker
        v-model="month_to_daterange"
        type="month"
        value-format="YYYY-M"
        @change="cange_date_to_daterange"
        :clearable="false"
    />
  </el-form-item>

  <el-calendar ref="calendar" v-model="month_date" style="pointer-events:none">
    <template #header="{ date }">
      <span>{{ date }}</span>
    </template>

    <template #date-cell="{ data }">
      <p>{{ data.day.split('-').slice(1).join('-') }}</p>
      <p>{{inbound[data.day]}}</p>
      <p>{{outbound[data.day]}}</p>
    </template>
  </el-calendar>
</template>

<script setup lang="ts">
import {CalendarInstance, ElMessage} from 'element-plus'
import {ref} from "vue";
import {reqInOutHistogram} from "@/api/first/DataAnalysis";
import {InOutHistogramResponseData} from "@/api/first/DataAnalysis/type.ts";

const month_to_daterange = ref<string>('')
const cange_date_to_daterange = () => {
  let temp1 = month_to_daterange.value.split('-')

  month_date.value = new Date(Number(temp1[0]), Number(temp1[1])-1)

  let date_obj_start = new Date(Number(temp1[0]), Number(temp1[1])-1, 1, 5)
  let date_obj_stop = new Date(Number(temp1[0]), Number(temp1[1]), 0, 5)

  // 得到一个月的第一天是周几
  let start_month = date_obj_start.getDay()
  let stop_month = date_obj_stop.getDay()

  let date_start1 = date_obj_start.setDate(date_obj_start.getDate()-start_month);
  let date_start=new Date(date_start1);

  let date_stop1 = date_obj_stop.setDate(date_obj_stop.getDate()-stop_month+6);
  let date_stop=new Date(date_stop1);

  const year1 = date_start.getFullYear();
  const month1 = ('0' + (date_start.getMonth() + 1)).slice(-2);
  const day1 = ('0' + date_start.getDate()).slice(-2);

  const year2 = date_stop.getFullYear();
  const month2 = ('0' + (date_stop.getMonth() + 1)).slice(-2);
  const day2 = ('0' + date_stop.getDate()).slice(-2);

  console.log(`${year1}-${month1}-${day1}`)
  console.log(`${year2}-${month2}-${day2}`)

  reqInOutHistogram({
    start_date: `${year1}-${month1}-${day1}`,
    end_date: `${year2}-${month2}-${day2}`,
  }).then((result: InOutHistogramResponseData) => {
    let temp5 = result.data.date
    let temp6 = result.data.in
    let temp7 = result.data.out

    for(let i = 0; i<=result.data.date.length; i++ ){
      if(temp6[i] !== 0){
        inbound.value[temp5[i]] = `入库：${Math.round(temp6[i])}`
      }
      if(temp7[i] !== 0){
        outbound.value[temp5[i]] = `出库：${-Math.round(temp7[i])}`
      }
    }

    console.log('result.data', result.data)
    ElMessage.success(result.success?.message)
  })
}



const calendar = ref<CalendarInstance>()

// 存储本月数据
const month_date = ref<Date>()


const inbound = ref<{[key: string]: string}>({})
const outbound = ref<{[key: string]: string}>({})
</script>

<style>
</style>
